import { createRouter, createWebHistory } from 'vue-router'
import LeftSidebar from "@/components/LeftSidebar.vue";
import RightSidebar from "@/components/RightSidebar.vue";
import TopNav from "@/components/TopNav.vue";
import BottomNav from "@/components/BottomNav.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/layout',
      name: 'layout',
      components: {
        default: () => import('@/views/LayoutView.vue'),
        // 与 `<router-view>` 上的 `name` 属性匹配
        LeftSidebar,
        RightSidebar,
        TopNav,
        BottomNav
      }
    },
    {
      path: '/',
      redirect: {
        name: 'welcome'
      }
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('@/views/AboutView.vue')
    },
    {
      path: '/welcome/:id?',
      name: 'welcome',
      component: () => import('@/views/WelcomeView.vue')
      // meta: { transition: 'slide' },
    },
    {
      path: '/start',
      name: 'start',
      component: () => import('@/views/StartView.vue')
    },
    {
      path: '/home',
      name: 'home',
      component: () => import('@/views/HomeView.vue')
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/LoginView.vue')
    },
    {
      path: '/:pathMatch(.*)*',
      name: 'NotFound',
      component: () => import('@/views/404View.vue')
    }
  ]
})

export default router
